<template>
  <modal :is-open="isOpen">
    <div class="modify-user-info" @click.stop>
      <avatar :info="{ name: name, avatar: avatar }" size="70px" />
      <input
        v-model="name"
        label="用户名"
        placeholder="请输入用户名"
        height="40px"
        font-size="14px"
        :readonly="true"
      />
        <input
          v-model="password"
          :type="isPasswordVisible ? 'text' : 'password'"
          label="密码"
          placeholder="请输入密码"
          height="40px"
          font-size="14px"
          :readonly="false"
        />
        <button
          type="button"
          class="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-gray-500"
          @click="isPasswordVisible = !isPasswordVisible"
        >
        </button>
      <div class="flex gap-[15px] justify-center w-full mt-[20px]">
        <button type="minor" @click="isOpen = false">取消</button>
        <button @click="onUpdateUser">确定</button>
      </div>
    </div>
  </modal>
</template>
<script setup>
import Modal from '@/components/Modal.vue'
import Avatar from '@/components/Avatar.vue'
import Input from '@/components/Input.vue'
import Button from '@/components/Button.vue'
import { onMounted, ref, watch } from 'vue'
import { useUserInfoStore } from '@/stores/useUserInfoStore.js'
import UserApi from '@/api/user.js'
import { useToast } from '@/components/ToastProvider.vue'

const showToast = useToast()
const isOpen = defineModel('isOpen')
const isPasswordVisible = ref(false)

const userInfoStore = useUserInfoStore()
const name = ref(userInfoStore.userName)
const email = ref(userInfoStore.email)
const password = ref(userInfoStore.password)
const avatar = ref(userInfoStore.avatar)

watch(isOpen, (newVal) => {
  if (newVal) {
    name.value = userInfoStore.userName
    email.value = userInfoStore.email
    avatar.value = userInfoStore.avatar
  }
})

const onUpdateUser = () => {
  UserApi.update({ name: name.value, avatar: avatar.value,password:password.value }).then((res) => {
    if (res.code === 0) {
      userInfoStore.setUserAvatar(avatar.value)
      showToast('修改成功~')
      isOpen.value = false
    }
  })
}
// 组件挂载时主动请求用户信息
onMounted(async () => {
  try {
    const res = await UserApi.getInfo({ userId: userInfoStore.userId })
    if (res.code === 0) {
      password.value = res.data.password || ''
    } else {
      showToast('获取用户信息失败', true)
    }
  } catch (err) {
    console.error('获取用户信息异常:', err)
    showToast('网络错误，请稍后再试', true)
  }
})

</script>
<style lang="less" scoped>
.modify-user-info {
  width: 400px;
  height: auto;
  min-height: 280px;
  background-image: linear-gradient(
    130deg,
    rgba(var(--background-color), 0.7),
    rgba(var(--background-color), 0.9)
  );
  backdrop-filter: blur(10px);
  border: rgba(var(--background-color), 0.5) 3px solid;
  max-width: 90%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 15px;
}
button {
  transition: color 0.2s ease;
}
button:hover {
  color: rgb(var(--primary-color));
}
</style>
